<template>
  <div class="merchandise-management views-container">
    <choose-files ref="chooseFiles" :config="chooseFilesConfig" :changeEvt="uploadFileChange"></choose-files>
    <choose-link ref="chooseLink" :config="chooseLinkConfig" :changeEvt="uploadFileChange"></choose-link>
    <div class="wlm-table">
      <!-- <div class="wlm-form-header">抽奖汇总页设置</div> -->
      <div class="wlm-form-content">
        <el-form
          ref="platform"
          size="small"
          label-width="140px"
          class="retail-form"
          label-position="right"
        >
          <el-form-item label="页面封面图">
            <choose-files
              ref="chooseFilesImg"
              :config="chooseCopyrightConfigs"
              :changeEvt="formFormatFiltersChange"
            ></choose-files>
            <div class="form-help">建议尺寸750*300</div>
          </el-form-item>
          <el-form-item label="背景色">
            <el-color-picker v-model="formFormatData.formData.bg_color"></el-color-picker>
          </el-form-item>

          <el-form-item label="页面分享图">
            <choose-files
              ref="chooseFilesImg"
              :config="chooseShareImg"
              :changeEvt="formFormatFiltersChange"
            ></choose-files>
            <div class="form-help">建议尺寸400*300</div>
          </el-form-item>

          <el-form-item label="底部图标按钮">
            <div
              class
              v-for="(edititem,index) in formFormatData.formData.button"
              v-bind:key="index"
            >
              <div class="item" draggable="false">
                <div class="nav-item-image-content">
                  <div
                    class="nav-item-image-wrapper"

                  >
                    <div
                     @click="uploadTrigger('chooseIcon',index, 'default')"
                      class="nav-item-image-block img-center"
                      :style="{'background-image':`url(${edititem.file_path})`}"
                    ></div>
                    <div class="nav-item-image-text">选择</div>
                    <div class="del_icon" @click="del(index)" v-if="edititem.file_path">
                      <i class="el-icon-close"></i>
                    </div>
                  </div>
                  <div class="form-help">建议尺寸100*100</div>
                </div>
                <div class="nav-item-link flex-row flex-align-c">
                  <div class="nav-item-link-label">链接:</div>

                  <div class="readonly-div" @click="uploadTrigger('chooseUrl', index)">
                    <div
                      class="readonly ivu-input-wrapper ivu-input-wrapper-default ivu-input-type"
                    >
                      <i
                        class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"
                      ></i>
                      <input
                        autocomplete="off"
                        :value="formFormatData.formData.linkurl[index]"
                        spellcheck="false"
                        type="text"
                        placeholder="请选择链接"
                        readonly="readonly"
                        class="ivu-input ivu-input-default"
                      />
                    </div>
                    <i class="icon icon-fujian readonly-icon" style="left: 12px;margin-top:-3px;"></i>
                  </div>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="选择商家图标">
            <div class>
              <choose-files
                ref="chooseFilesImg"
                :config="chooseStoreImg"
                :changeEvt="formFormatFiltersChange"
              ></choose-files>
              <div class="form-help">建议尺寸120*120</div>
              <div class="nav-item-link flex-row flex-align-c">
                  <div class="nav-item-link-label">链接:</div>

                  <div class="readonly-div" @click="uploadTrigger('chooseUrl', 2)">
                    <div
                      class="readonly ivu-input-wrapper ivu-input-wrapper-default ivu-input-type"
                    >
                      <i
                        class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"
                      ></i>
                      <input
                        autocomplete="off"
                        :value="formFormatData.formData.linkurl[2]"
                        spellcheck="false"
                        type="text"
                        placeholder="请选择链接"
                        readonly="readonly"
                        class="ivu-input ivu-input-default"
                      />
                    </div>
                    <i class="icon icon-fujian readonly-icon" style="left: 12px;margin-top:-3px;"></i>
                  </div>
                </div>
            </div>
          </el-form-item>
          <el-form-item label="分享文案">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="formFormatData.formData.share_txt"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <div class="footBtn">
              <el-button @click="$router.back(-1)">返回</el-button>
              <el-button type="primary" @click="submitLuckForm">保存</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import ChooseFiles from "@/components/ChooseFiles/index";
import ChooseLink from "@/components/ChooseLink/index";
import mixins from "@/mixins/mixins";
import { reviewSet, getLuckReviewSet } from "@/api/application";
export default {
  mixins: [mixins.getters("Form")],
  name: "LuckSet",
  data() {
    return {
      current: -1,
      model: "default",
      editData: [1, 2],
      chooseCopyrightConfigs: {
        type: ["image"],
        model: "display",
        uploadConfig: {
          limit: 1,
          isMore: false,
          model: "display",
        },
        initList: [],
        isShowList: true,
        file_type: "image",
        bindKey: {
          key: "cover",
          model: "img",
        },
      },

      chooseShareImg: {
        type: ["image"],
        model: "display",
        uploadConfig: {
          limit: 1,
          isMore: false,
          model: "display",
        },
        initList: [],
        isShowList: true,
        file_type: "image",
        bindKey: {
          key: "share_img",
          model: "img",
        },
      },

      chooseStoreImg: {
        type: ["image"],
        model: "display",
        uploadConfig: {
          limit: 1,
          isMore: false,
          model: "display",
        },
        initList: [],
        isShowList: true,
        file_type: "image",
        bindKey: {
          key: "merchant_icon",
          model: "img",
        },
      },
      chooseLinkConfig: {
        type: ["chooseLink"],
        initList: [],
        link_type: "1",
      },
      chooseFilesConfig: {
        type: ["image"],
        model: "normal",
        initList: [],
        file_type: "image",
        bindKey: {
          key: "home_logo",
          model: "img",
        },
      },
      formFormatData: {
        key: ["platform"],
        api: {
          editForm: {
            api: getLuckReviewSet,
            params: {
              always: true,
            },
            filters: {
              img: {
                bindInit: [
                  "chooseCopyrightConfigs",

                  "chooseStoreImg",
                  "chooseShareImg",
                ],
              },
            },
          },
          // submitForm: liveSave
        },
        formData: {
          share_img: [],
          merchant_icon: [],
          cover: [],

          bg_color: "#F15D67",
          share_txt: "",
          button: [0, 0],
          linkurl: ["", "",""],
        },
      },
    };
  },
  components: {
    ChooseFiles,
    ChooseLink,
  },

  created() {
    getLuckReviewSet().then((res) => {
      console.log(res);
      let data = res.data.data;
      console.log(data);
      if(data.home_icon.length>0){
 this.formFormatData.formData.button[0] = data.home_icon[0];
      }
      if(data.serve_icon.length>0){
 this.formFormatData.formData.button[1] = data.serve_icon[0];
      }
      this.formFormatData.formData.linkurl[0] = data.home_link;
      this.formFormatData.formData.linkurl[1] = data.serve_link;
       this.formFormatData.formData.linkurl[2] = data.merchant_link;
      this.$forceUpdate();
    });
  },
  methods: {
    del(index){
      console.log(index)
     this.formFormatData.formData.button[index]='';
      this.$forceUpdate();
    },
    submitLuckForm() {
      let formDatas = this.formFormatData.formData;
      let home_icon = [];
      let serve_icon = [];
      let home_link, serve_link,merchant_link;
      home_icon.push(formDatas.button[0]);
      serve_icon.push(formDatas.button[1]);
      home_link = formDatas.linkurl[0];
      serve_link = formDatas.linkurl[1];
      merchant_link= formDatas.linkurl[2];
      let { share_img, merchant_icon, cover, bg_color, share_txt } = formDatas;
      // luckdhjs().then((res) => {
      //   console.log(res);
      // });
      reviewSet({
        share_img,
        merchant_icon,
        cover,
        bg_color,
        share_txt,
        home_icon,
        serve_icon,
        home_link,
        serve_link,
        merchant_link
      }).then((res) => {
        console.log(res);
        if (res.data.code == 1) {
          this.$message({
            type: "success",
            message: "保存成功!",
          });
          this.$router.push({
            path: "/application/lottery",
          });
        }
      });
    },
    uploadTrigger(evt, index, model) {
      console.log("chooseUrl++++++++++++++", evt, index, model);

      if (evt === "chooseIcon") {
        this.current = index;
        this.model = model;
        this.$refs.chooseFiles.toggle();
      } else if (evt === "chooseUrl") {
        this.current = index;
        this.model = model;
        this.$refs.chooseLink.toggle();
      }
    },

    uploadFileChange(files) {
      console.log(files);
      const { key } = files;
      if (key === "ChooseLink") {
        const {
          currentRow: [file_path],
          displayData: [{ name, title, path, app_id, type }],
        } = files;
        if (file_path || path) {
          const current = this.current;
          this.formFormatData.formData.linkurl[current] = file_path;
          this.$forceUpdate();
          // this.formFormatData.formData.button[current]['linkurl']=file_path;
          //  currentItem.linkurl = file_path || { path, app_id, type };
          // currentItem.name =
          //   type === "12"
          //     ? "wehcat"
          //     : type === "13"
          //     ? "sapp"
          //     : type === "14"
          //     ? "phone"
          //     : name;
          // currentItem.text = title;
          // currentItem.app_id = app_id
          // currentItem.type = type
        } else {
          this.$message.error("请选择链接~!");
        }
      } else {
        const {
          displayData: [file_path],
        } = files;
        console.log(file_path);

        //  this.filesEmpty();
        if (this.current !== -1 && file_path) {
          this.formFormatData.formData.button[this.current] = file_path;
          console.log(this.formFormatData.formData.button);
          this.$forceUpdate();

          // const currentItem = this.editData[this.current];
          // currentItem[
          //   `${this.model === "active" ? "iconactivePath" : "iconPath"}`
          // ] = file_path;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.allChooseImg {
  display: flex;
  text-align: center;
  & > div {
    margin-right: 20px;
  }
}
.form-help {
  font-size: 12px;
  color: #999999;
}
.footBtn {
  width: 100%;
  text-align: center;
}
.ivu-input-wrapper {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  line-height: normal;
  width: 100%;

  input {
    background: #e8effc;
    border: 0;
    width: 300px;
    height: 28px;
    border-radius: 3px;
    padding-left: 18px;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}
.nav-item-image-content {
  .nav-item-image-wrapper {
    position: relative;
    cursor: pointer;
    width: 64px;
    margin-top: 10px;
    border: 1px solid #e5e5e5;

    .nav-item-image-block {
      width: 64px;
      height: 50px;
      background-color: #2b2d30;
    }
  .del_icon{
    position: absolute;
    top: 0;
    right: -2px;
    width: 15px;
    height: 15px;
     background-color: #999;

     border-radius: 0 0 0 50%;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      &:hover{
         background-color:#fff;
         color: #999;
      }
  }
    .nav-item-image-text {
      width: 64px;
      height: 14px;
      line-height: 14px;
      font-size: 12px;
      color: #fff;
      background-color: #797979;
      text-align: center;
    }
  }
}
.nav-item-tips {
  color: #999;
  padding: 5px 0 10px;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 10px;
}

.nav-item-link-label {
  margin-right: 10px;
}

.nav-item-link-select {
  color: #409eff;
  font-size: 12px;
  cursor: pointer;
  margin-left: 10px;
}

.nav-item-link-name {
  display: flex;
  justify-content: space-between;
  border: 1px solid;
  cursor: pointer;
  border-color: hsla(215, 100%, 60%, 0.3);
  background: #e2f3ff;
  color: #666666;
  margin-left: 10px;
  border-radius: 3px;
  flex: 1;
  font-size: 12px;
  line-height: 1;
  padding: 4px;
}
.homeLogoSet {
  width: 120px;
  height: 120px;
  border: 1px dashed black;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
